<template>
  <div>
    <section class="header">
      <el-row>
        <el-col type="flex" justify="center">
          <ProductionSteps :active="4" align-center :is-cover="false"/>
        </el-col>
      </el-row>
    </section>

    <section class="help">
      <HeaderHelpDoc :head-context="headContext"/>
    </section>

    <el-row :gutter="30" class="main-wrap">
      <el-col :span="16" class="main-left">
        <el-row class="scan">
          <el-col class="operator-area">
            <el-row type="flex" justify="center" align="center">
              <el-col :span="6">
                <el-radio-group class="anniu" v-model="radio">
                  <el-radio label="0">扫描不提交</el-radio>
                  <el-radio label="1">扫描并提交流程</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="12" v-if="radio === '0'">
                <span>请扫描SN条码: </span>
                <el-input
                  @keydown.native.enter="scanOrInputBarcode"
                  clearable placeholder="点击此处开始扫描"
                  style="width: 270px" v-loading="loadingScan"
                  v-model="scanBarcode">
                  <el-button icon="el-icon-search" slot="append" type="primary"></el-button>
                </el-input>
              </el-col>
              <el-col :span="12" v-else>
                <span>请扫描SN条码: </span>
                <el-input
                  @keydown.native.enter="scanOrInputBarcode1"
                  clearable placeholder="点击此处开始扫描"
                  style="width: 270px" v-loading="loadingScan"
                  v-model="scanBarcode">
                  <el-button icon="el-icon-search" slot="append" type="primary"></el-button>
                </el-input>
              </el-col>
              <el-col :span="6">
                <span style="padding-left: 30px">下一道工序:</span>
                <span style="padding: 15px">
                <a-button @click="$router.push({name:'halfFinishedGoodsTest'})">半成品质检</a-button>
              </span>
              </el-col>
            </el-row>
          </el-col>

          <el-col class="condition-filter">
            <el-row>
              <el-col :span="22">
                <line-select :value.sync="selectedLineBody" style="width: 37%;"></line-select>
              </el-col>
              <el-col :span="2">
                <el-checkbox>显示图片</el-checkbox>
              </el-col>
            </el-row>


          </el-col>


        </el-row>

        <el-row>
          <el-col>
            <el-row>
              <el-col>
                <el-collapse v-model="activeNames" style="border: 1px solid #e6ebf5">
                  <el-collapse-item name="1">
                    <template slot="title">
                      <h3 style="text-indent: 1em">工位信息展示</h3>
                    </template>
                    <el-row type="flex" class="row-bg" justify="center">
                      <el-col :span="5">工位名称：</el-col>
                      <el-col :span="5">工位线体：</el-col>
                      <el-col :span="5">所属车间：</el-col>
                      <el-col :span="5">操作员：</el-col>
                    </el-row>
                  </el-collapse-item>
                </el-collapse>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="product-info">
          <el-col>
            <h3 style="text-indent: 1em">产品信息</h3>
          </el-col>
          <el-col>
            <el-row type="flex" justify="center">
              <el-col :span="7">产品编号：{{productInfo.OrderProductCode}}</el-col>
              <el-col :span="7">产品名称：{{productInfo.ProductName}}</el-col>
              <el-col :span="7">商户：{{productInfo.CtmName}}</el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" justify="center">
              <el-col :span="7">作品名称：{{productInfo.Name}}</el-col>
              <el-col :span="7"></el-col>
              <el-col :span="7">P数：{{productInfo.PhotoNum}}</el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" justify="center">
              <el-col :span="7">备注：{{productInfo.NotifyContent}}</el-col>
              <el-col :span="7"></el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </el-col>

        </el-row>

        <el-row class="component-code">
          <el-col>
            <el-row style="text-indent: 1em;margin-top:  10px">
              <el-col :span="8">组件编码：</el-col>
              <el-col :span="8">组件名称：</el-col>
              <el-col :span="8">P数：</el-col>
              <vue-waterfall-easy
                :imgWidth="200"
                :imgsArr="folderPicturesDrawerData"
                @scrollReachBottom="scrollReachBottom"
                hrefKey="fullUrl"
                ref="waterFall"
                srcKey="fullPath"
                style="min-height: 350px"
              >
              </vue-waterfall-easy>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="component-code">
          <el-col>
            <el-row style="text-indent: 1em;margin-top:  10px">
              <el-col :span="8">组件编码：</el-col>
              <el-col :span="8">组件名称：</el-col>
              <el-col :span="8">P数：</el-col>
              <vue-waterfall-easy
                :imgWidth="200"
                :imgsArr="folderPicturesDrawerData"
                @scrollReachBottom="scrollReachBottom"
                hrefKey="fullUrl"
                ref="waterFall"
                srcKey="fullPath"
                style="min-height: 350px"
              >
              </vue-waterfall-easy>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="7" class="main-right">
        <el-row>
          <el-col>
            <h3>待装过站的产品</h3>
            <AzureDynamicTable :data="waitCoverTable" :column-des-objs="waitColumnDesObjs"></AzureDynamicTable>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <h3>过站产品</h3>
            <AzureDynamicTable :data="stopOverTable" :column-des-objs="stopOverDesObjs"></AzureDynamicTable>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ProductionSteps from '@/views/productManagement/aComponents/ProductionSteps'
  import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
  import AButton from '@/components/ATheFridayClub/AButton'
  import LineSelect from '@/components/ATheFridayClub/businessRelation/LineSelect'
  import WorkSitInfo from '@/components/ATheFridayClub/businessRelation/WorkSitInfo'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import { ScanFrist, ScanCommit, GetAll } from '@/api/productCover'
  import { ERR_OK } from '@/utils/commons'

  export default {
    name: 'insidePagesVolume',
    components: {
      AzureDynamicTable,
      ProductionSteps,
      HeaderHelpDoc,
      AButton,
      LineSelect,
      WorkSitInfo,
      vueWaterfallEasy
    },
    data() {
      return {
        activeNames: ['1'],
        headContext: '扫描产品组件，进入指定格子，齐套后进行合册。',
        selectedLineBody: '',
        radio: '0',
        scanBarcode: '',
        loadingScan: false,
        folderPicturesDrawerData: [],
        waitCoverTable: [],
        waitColumnDesObjs: [],
        stopOverTable: [],
        stopOverDesObjs: [],
        TechIdList: [], //当前流程id
        productInfo:{}//产品信息
      }
    },
    async created() {
      await this.getProcessAll()
    },
    methods: {
      async scanOrInputBarcode({ target: { value } }) {
        const inTechId = this.TechIdList[16].TechId
        const { Result, Code,Message } = await ScanFrist({ inCode: value, inTechId })
        if(Code === ERR_OK){
          this.$message.info(Message)
            this.productInfo = Result
        }
      },
      async scanOrInputBarcode1({ target: { value } }) {
        const inTechId = this.TechIdList[16].TechId
        const { Result, Code,Message } = await ScanCommit({ inCode: value,inTechId })
        if(Code === ERR_OK){
          this.$message.success(Message)
        }
      },
      async getProcessAll() {
        const { Result, Code } = await GetAll()
        if (Code === ERR_OK) {
          this.TechIdList = Result
        }
      },
      scrollReachBottom() {
        this.$refs.waterFall.waterfallOver()
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/index.scss";

  .text-break {
    cursor: pointer;
    @include noWrap()
  }

  .header {
    padding: 10px 0;
  }

  .help {
    padding: 10px;
  }

  .main-wrap {
    padding: 10px;
    font-size: $mainSize;
    box-sizing: border-box;

    .main-left {
      min-width: 840px;

      .scan {
        .operator-area {
          padding: 15px 10px;
          border: 1px solid $borderColor;
          border-radius: 3px;
        }

        .condition-filter {

          padding: 40px 0;
        }
      }

      .anniu {
        float: left;
        width: 6%;
        margin-left: 1.8%;

        .el-radio {
          margin-bottom: 5px;
        }
      }

      .product-info {
        border: 1px solid #e6ebf5;
        margin-top: 18px;
        min-height: 170px;

        /deep/ .el-col {
          margin-top: 5px;
        }
      }

      .component-code {
        border: 1px solid #e6ebf5;
        margin-top: 18px;
        min-height: 350px;
      }
    }

    .main-right {
      border: 1px solid #e6ebf5;
      min-height: 1206px;
      min-width: 553px;

      /deep/ .el-col {
        margin-top: 5px;
      }
    }

  }

</style>
